<template>
  <div class="home">
    <input type="text" v-model="text" @keydown.enter="add" />
    <hr />
    <ul class="list">
      <li v-for="item in $store.state.list" :key="item.id">
        <input type="checkbox" v-model="sel" :value="item" @change="change" />
        <span>{{ item.title }}</span>
        <button>删除</button>
      </li>
    </ul>

    <hr />
    全选：<input type="checkbox" v-model="checked" @change="changeall" />
    <span>已选择：{{ sel.length }}/全部：{{ $store.state.list.length }}</span>

    <button v-if="sel.length != 0" @click="removeall">删除选中</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: "",
      checked: false,
      sel: [],
    };
  },
  methods: {
    add() {
      if (this.text != "") {
        this.$store.commit("add", this.text);
      } else {
        alert("不能为空");
      }
    },
    change() {
      if (this.sel.length == this.$store.state.list.length) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },
    changeall() {
      if (this.checked == true) {
        this.sel = this.$store.state.list;
      } else {
        this.sel = [];
      }
    },
    removeall() {
      // this.sel = [];
      this.$store.commit("removeall", this.sel);
      this.sel = [];
    },
  },
};
</script>
<style lang="scss">
.list button {
  display: none;
}
.list {
  // li {
  //   &:hover {
  //     background: #ccc;
  //     button {
  //       display: inline-block !important;
  //     }
  //   }
  // }
  li:hover {
    background: #ccc;
    button {
      display: inline-block !important;
    }
  }
}
</style>
